<template>
    <div class="rs-breadcrumbs breadcrumbs-overlay">
        <div class="breadcrumbs-img"><img src="@/assets/images/category_bg.jpg"></div>
        <div class="breadcrumbs-text white-color">
            <div class="container">
                <div class="page-title-outer">
                    <h1 class="page-title text-ellipsis">{{ pTitle }}</h1>
                </div>
                <div class="breadcrumbs-bar">
                    <ul>
                        <li><a href="/"><i class="fa fa-home"></i> 首页</a></li>
                        <!-- 动态生成面包屑导航 -->
                        <li v-for="(crumb, index) in breadcrumbs" :key="index">
                            <a :href="crumb.path">{{ crumb.name }}</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { pMenuItems } from '@/router/primary';

const route = useRoute();
const props = defineProps({
    pTitle: {
        type: String,
        default: ''
    },
    path: {
        type: String,
        default: ''
    }
});
function findParentName(data, targetCategory) {
    for (const item of data) {
        if (item.children) {
            const foundChild = item.children.find(child =>
                child.link.includes(`category=${targetCategory}`)
            );
            if (foundChild) return item.name;

            const nestedResult = findParentName(item.children, targetCategory);
            if (nestedResult) return nestedResult;
        }
    }
    return null;
}
function findParent(data, targetCategory) {
    for (const item of data) {
        if (item.children) {
            const foundChild = item.children.find(child =>
                child.link.includes(`category=${targetCategory}`)
            );
            if (foundChild) return item;

            const nestedResult = findParentName(item.children, targetCategory);
            if (nestedResult) return nestedResult;
        }
    }
    return null;
}
const getInfo = () => {
    const item = findParent(pMenuItems,route.query.category)
    let menuItem = []
    if (item.children) {
        menuItem = item.children.find((item, index) => item.link.includes(route.query.category))
    }
    return menuItem
}

const menuItem = getInfo();
const breadcrumbs = ref([
    {
        name: props.pTitle,
        path: props.path
    },
    {
        name: menuItem.name,
        path: menuItem.link
    },
]);
</script>